<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>FileReader</title>
	</head>
	<body>
		<input type="file" onchange="readFile(this)" />

		<hr />

		<div id="fileText"></div>

		<script>
			// FileReader 是一个对象，其唯一目的是从 Blob（因此也从 File）对象中读取数据。
			// 它使用事件来传递数据，因为从磁盘读取数据可能比较费时间。

			let reader = new FileReader() // 没有参数

			function readFile(input) {
				let file = input.files[0]

				let reader = new FileReader()

				// 将数据读取为给定编码（默认为 utf-8 编码）的文本字符串。
				reader.readAsText(file)

				reader.onload = function () {
					console.log(reader.result)
					document.querySelector('#fileText').innerHTML = 'utf-8 编码的文本字符串:' + reader.result
				}

				reader.onerror = function () {
					console.log(reader.error)
				}
			}
		</script>
	</body>
</html>
